<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/pattern.css"/>
  <link rel="stylesheet" href="css/iconfont.css">
  <title>豆瓣fm</title>
</head>
<body>
  <header>
    <nav class='container'>
      <div class='nav_l'>豆瓣fm</div>
      <div class='nav_r'>
        <div>userPhoto</div>
        <div>大字乐坊</div>
      </div>
    </nav>
    <div class='playmusic container'>
      <div class='playArea'>
        <audio id='source_audio' src='static/music/soulsearch.m4a'></audio>
        <h4>我的歌单</h4>
        <div class='AreaTop'>
          <div class='songInfor'>
            <div id='musicName' class='songName'>soulseach</div>
            <div id='musicAuth' class='songAuth'>volo</div>
          </div>
          <div class='sound'>
            <i class='iconfont icon-yinliang'></i>
            <div class='soundProcess'>
              <div class='turnSound'></div>
            </div>
          </div>
        </div>
        <div class='songProcess'>
          <div id='currentProcess'></div>
        </div>
        <div class='songControl'>
          <div class='control_l'>
            <i class='icon iconfont icon-heart-br'></i>
            <i class='icon iconfont icon-shanchu'></i>
          </div>
          <div class='control_r'>
            <i id='previous' class='icon iconfont icon-shangyishouweidianji'></i>
            <i id='playThis' class='icon iconfont icon-bofang'></i>
            <i id='next' class='icon iconfont icon-xiayishouweidianji'></i>
          </div>
        </div>
      </div>
      <div class='songCover'>
        <img id='musicCover' src='' />
      </div>
    </div>
    <div class='switchIcon'>
      <i id='switchBtn' class='icon iconfont icon-icon-'></i>
    </div>
  </header>
  <article>
    <div><i class='iconfont icon-shouyinji'></i><span>兆赫</span></div>
    <div><i class='iconfont icon-zhuanjiguangpan'></i><span>歌单</span></div>
    <div><i class='iconfont icon-xin'></i><span>我的</span></div>
    <div><i class='iconfont icon-sousuo1'></i><span>搜索</span></div>
  </article>
  <script src='js/index.js'></script>
</body>
</html>